
<html>
    <head>
        <link rel="stylesheet" href="{{ MEDIA_URL }}css/schedule.css" type="text/css"/>
        <title>Foo</title>
    </head>
    <body>


        {% for day in day_names %}
        <div class="day-header {{ day }}">{{ day|capfirst }}</div>
        {% endfor %}

        <div class="container" style="top: 40">

        {% for t in minor %}
        <div class="tick minor_tick" style="top: {{ t }}px;"></div>
        {% endfor %}

        {% for t in major %}
        <div class="tick major_tick" style="top: {{ t }}px;"></div>
        {% endfor %}
        {% for day in day_names %}
            <div class="day {{ day }}">
            </div>
            {% for hour, top in hours %}
                <span class="{{ day }} hour-label" style="top: {{ top }};">{{ hour }}</span>
            {% endfor %}
        {% endfor %}
        {% for t in timeslots %}
            <div class="{{ t.day }} {{ t.type }} bubble 
            {% ifchanged t.identifier %}
                {% if forloop.first %}
                    {% cycle 'one' 'two' 'three' 'four' 'five' 'six' as offeringcolours %}
                {% else %}
                    {% cycle offeringcolours %}
                {% endif%}
            {% else %}
                {{ offeringcolours }}
            {% endifchanged %}"
            style="height: {{ t.height }}; top: {{ t.top }};">
            {{ t.title }}
            </div>
        {% endfor %}
            
        </div>
                
    </body>
</html>
